<template>
	<view class="">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">充值</view>
				<view class="header-right" @tap.stop="$tools.jump('./rechargeRecords')">
					充值记录
				</view>
			</view>
		</view>
		<view class="balance-top">
				<view class="integral">
					<view class="integral-list">
						<view class="integral-list__item">
							<view class="info">余额</view>
							<view class="number">{{ userMoney.validNum1 ? userMoney.validNum1 : 0 }}</view>
						</view>
					</view>
				</view>
			</view>	
			<view class="operateBox-tabs operateBox-tabs--top">
				<view class="title"><text class="line"></text>请选择充值金额</view>
				<view class="priceListBox">
					<view class="priceListBox-list">
						<view class="priceListBox-list__item" v-for="(item, index) in rechargeAmountList" :key="index"
							:class="{ 'priceListBox-list__item--active': active == index }" @tap.stop="checkActive(index, item)">
							<view class="price" :class="{ 'price--active': active == index }"><text>￥</text>{{ item }}</view>
						</view>
					</view>
				</view>
				<view class="operateBox-formBox">
					<!-- <view class="operateBox-formBox-list-header">充值金额</view> -->
					<view class="operateBox-formBox-list operateBox-formBox-listBg"
						:class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: num != '' }">
						<view class="symbol">￥</view>
						<input type="text" placeholder="输入自定义金额" v-model="num" placeholder-class="inputStyle" @blur="blurInput(1)"
							@focus="focusInput(1)" />
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active"
								@click="clearData('num')">
								<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="buyWaysList">
				<!-- <view class="buyWaysList-headerTitle">支付方式</view> -->
				<view class="buyWaysList-list">
					<!-- <view class="buyWaysList-list__item" @tap.stop="checkWaysActive(1)">
						<view class="left">
							<image src="@/static/public/wechat.png" mode=""></image>
							<view class="tips">微信支付</view>
						</view>
						<view class="check">
							<image :src="waysActive == 1 ? '../../static/public/check-active.png' : '../../static/public/check.png'"
								mode=""></image>
						</view>
					</view> -->
					<view class="buyWaysList-list__item">
						<view class="left">
							<image class="img" src="@/static/public/alipay.png" mode=""></image>
							<view class="tips">支付宝</view>
						</view>
						<view class="check">
							<image :src="waysActive == 2 ? '../../static/public/check-active.png' : '../../static/public/check.png'"
								mode=""></image>
						</view>
					</view>
					<!-- <view class="buyWaysList-list__item" @tap.stop="checkWaysActive(3)">
						<view class="left">
							<image src="@/static/public/bank.png" mode=""></image>
							<view class="tips">银行卡</view>
						</view>
						<view class="check">
							<image :src="waysActive == 3 ? '../../static/public/check-active.png' : '../../static/public/check.png'"
								mode=""></image>
						</view>
					</view> -->
				</view>
			</view>

			<view class="initBtn" @tap.stop="$u.throttle(confirm, 1500)">充值</view>

		</view>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			isFocus: null,
			toggle: true,
			num: '100',
			active: 0,
			waysActive: 2,
			userMoney:{},
			rechargeAmountList: [],
		}
	},
	onLoad() {
		// let randomNumber = this.randomNum()
		// console.log('randomNumber',randomNumber)
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			this.getRechargeAmount();
			this.getUserMoney();
		},
		confirm() {
			if (this.num == '') {
				return this.$tools.toast('请输入充值金额');
			}
			// if (this.waysActive == 0) {
			// 	return this.$tools.toast('请选择支付方式');
			// }
			const that = this
			if(this.toggle){
				this.toggle = false;
				var data = {};
				// data['type'] = this.waysActive;
				let randomNumber = this.randomNum()
				randomNumber = randomNumber.toFixed(1)
				let num = Number(this.num) + Number(randomNumber) 
				num = num<0?Number(this.num):num
				console.log('随机数',randomNumber,',num',num)
				// data['amount'] = this.num;
				data['amount'] = num;
				console.log("data:",data);
				this.$Ajax('/api/money/cashRecharge',data,res => {
						if (res.code == 200) {
							// #ifdef APP-PLUS
							var orderInfo = res.data.body;  //从服务器获取的订单
							uni.getProvider({
									service: 'payment',
									success: function (res) {
											console.log(res.provider)
											if (~res.provider.indexOf('alipay')) {
													uni.requestPayment({
															"provider": "alipay",   //固定值为"alipay"
															"orderInfo": orderInfo, //此处为服务器返回的订单信息字符串
															success: function (res) {
																	var rawdata = JSON.parse(res.rawdata);
																	console.log("支付成功");
																	that.$tools.toastJump('充值提交成功','./rechargeRecords');
															},
															fail: function (err) {
																	console.log('支付失败:' + JSON.stringify(err));
															}
													});
											}
									}
							});
							// #endif
							// this.$tools.toastJump('充值提交成功','./rechargeRecords');
							this.waysActive = 2;
							this.num = '';
							this.toggle = true;
						} 
					},err => {
						this.toggle = true;
					}
				)
			}
		},
		// 
		getRechargeAmount() {
			var data = {};
			console.log("data：", data);
			this.$Ajax('/api/money/getRechargeAmount', data, res => {
				if (res.code == 200) {
					this.rechargeAmountList = res.data;
					this.num = this.rechargeAmountList[0];
				}
			}, err => {
			}, 'GET'
			)
		},
		checkWaysActive(index) {
			if (this.waysActive != index) {
				this.waysActive = index;
			}
		},
		checkActive(index, item) {
			if (this.active != index) {
				this.active = index;
				this.num = item;
			}
		},
		randomNum(){
			const min=0
			const max=0.5
			return  Math.random() * 0.5  ;
		},
		/* clear & eye */
		focusInput(index) {
			this.isFocus = index;
		},
		blurInput(index) {
			this.isFocus = null;
		},
		clearData(keyName) {
			for (var key in this.$data) {
				if (key == keyName) {
					this.$data[key] = '';
				}
			}
		},
	}
}
</script>

<style lang="scss" scoped>
@import '@/common/scss/pages/operate/register';

.balance{
	&-top{
		  padding-top: 0 !important;
			background: url('@/static/public/balanceBg4.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 120rpx 30rpx 0;
			.asset{
				@include flexCenterColumn;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				.num{
					font-family: DIN, DIN;
					font-weight: 700;
					font-size: 48rpx;
					color: #FFFFFF;
					margin: 22rpx 0;
				}
			}
			.integral{
				&-list{
					@include flexBetween;
					&__item{
						@include flexLeftColumn;
						height: 235rpx;
						padding: 40rpx;
						width: 100%;
						.info{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
						}
						.number{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 44rpx;
							color: #FFFFFF;
							margin-top: 20rpx;
						}
						.btnBox{
							@include flexBetween;
							margin-top: 20rpx;
							.btn{
								height: 58rpx;
								line-height: 58rpx;
								background: #FFFFFF;
								border-radius: 84rpx;
								font-size: 28rpx;
								color: #EE3A33;
								padding: 0 40rpx;
								margin-right: 16rpx;
							}
						}
					}
					.line{
						width: 0rpx;
						height: 66rpx;
						border: 2rpx solid rgba(255,255,255,0.41);
					}
				}
			}
		}
}
.operateBox-tabs {
	width: 93.6%;
	margin: auto;
	margin-top: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx 20rpx;
	padding-top: 32rpx !important;
	.title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;

		.line {
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background: #EE3A33;
			border-radius: 62rpx;
			margin-right: 14rpx;
			vertical-align: middle;
		}
	}
	.operateBox-formBox-list-header {
		margin-bottom: 26rpx;
	}

	.symbol {
		font-family: PingFang-SC-Bold, PingFang-SC-Bold;
		font-weight: 400;
		font-size: 30rpx;
		color: #EE3A33;
		margin-right: 26rpx;
	}
}

.priceListBox {
	margin-top: 20rpx;
	&-list {
		@include flexLeft;
		flex-wrap: wrap;

		&__item {
			background: #FFEFEA;
			border-radius: 16rpx;
			width: calc((100% - 40rpx) / 3);
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			margin-right: 20rpx;
			margin-top: 16rpx;
			&--active {
				background: #FF3931;
				color: #fff;
			}

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 48rpx;
				color: #FF3931;
				text-align: center;

				text {
					font-size: 24rpx;
				}

				&--active {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #fff;

					text {
						font-size: 24rpx;
					}
				}
			}

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}

.buyWaysList {
	width: 93.6%;
	margin: auto;
	margin-top: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx 20rpx;
	&-list {
		&__item {
			border-radius: 8rpx;
			// border: 2rpx solid rgba(219,219,219,0.302);
			padding: 14rpx 0rpx;
			margin-bottom: 10rpx;

			.left {
				.img {
					width: 52rpx;
					height: 52rpx;
					margin-right: 18rpx;
				}

				.tips {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}
			}
		}
	}
}

.initBtn {
	width: 93.6%;
	margin: auto;
	margin-top: 20rpx;
}

.tipsRecords {
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #1989F8;
	text-align: center;
	text-decoration: underline;
}
</style>